<template>
  <div class="app-container">
    <el-card class="m-t-15 el-card-dict">
      <sticky :sticky-top="100">
        <el-button type="primary" @click="aa">吸顶效果</el-button>
      </sticky>
      <div slot="header" class="flex-cls-nowrap-spc-btw">
        <span>吸顶/返回顶部效果展示</span>
      </div>
    </el-card>
    <!-- 可以添加 element ui 的提示 -->
    <el-tooltip placement="top" content="tooltip">
      <back-to-top :visibility-height="50" :back-position="50" transition-name="fade" />
    </el-tooltip>

  </div>
</template>

<script>

// 吸顶效果
import Sticky from "@/components/Sticky";
// 返回顶部
import BackToTop from "@/components/BackToTop";
export default {
  name: "UseSticky",
  components: {
    Sticky,
    BackToTop
  },

  data() {
    return {
      // customizable button style, show/hide critical point, return position
      myBackToTopStyle: {
        right: "50px",
        bottom: "50px",
        width: "40px",
        height: "40px",
        "border-radius": "4px",
        "line-height": "45px", // 请保持与高度一致以垂直居中 Please keep consistent with height to center vertically
        background: "#e7eaf1"// 按钮的背景颜色 The background color of the button
      }
    };
  },
  methods: {
    aa() {
      // console.log("执行");
    }
  }
};
</script>

<style scoped lang="scss">
.app-container{
  height: 200vh;
}
</style>
